<template>
  <div class="content" @scroll="handleScroll">
    <div v-for="item in items" :key="item.id" class="item">
      标题: {{ item.title}}<br>
      内容:<br>
      {{ item.content }}
    </div>
    <div v-if="isLoading" class="loading">加载中...</div>
    <div v-else-if="!hasMore" class="loading">没有更多数据了</div>
    <div v-else class="loading">上拉加载更多</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      isLoading: false,
      page: 1,
      hasMore: true
    };
  },
  mounted() {
    this.loadMoreData();
  },
  methods: {
    handleScroll(event) {
      const content = event.target;
      if (content.scrollTop + content.clientHeight >= content.scrollHeight - 10) {
        if (!this.isLoading && this.hasMore) {
          this.isLoading = true;
          this.page++;
          this.loadMoreData();
        }
      }
    },
    async loadMoreData() {
      try {
        // 模拟异步请求
        const newData = await this.fetchData(this.page);
        this.items = [...this.items, ...newData];
        this.isLoading = false;
        if (newData.length < 5) { // 假设每页5条数据
          this.hasMore = false;
        }
      } catch (error) {
        console.error('加载数据失败:', error);
        this.isLoading = false;
      }
    },
    async fetchData(page) {
      // 模拟API请求
      return new Promise(resolve => {
        setTimeout(() => {
          const response =  this.$axios.get('/consultation/listAll?pageNumber='+page+'&pageSize=5').then(
            (response) => {
              console.log(response.data.data.records)
              resolve(response.data.data.records);
            }
          );


        }, 1500);
      });
    }
  }
};
</script>

<style>
.content {
  height: 100vh;
  overflow-y: auto;
}
.item {
  height: 200px;
  margin: 10px 0;
  background-color: #f0f0f0;
}
.loading {
  text-align: center;
  padding: 20px 0;
  color: #666;
}
</style>